{% extends "base.html" %}

{% block title %}学生出勤 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .attendance-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .section {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .form-group {
        margin-bottom: 0;
    }
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
    }
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .form-control:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .btn-primary {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }
    .btn-secondary {
        background-color: #6c757d;
        color: white;
        border-color: #6c757d;
    }
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }
    .btn-outline-primary {
        color: #007bff;
        border-color: #007bff;
        background-color: white;
    }
    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }
    .btn-outline-secondary {
        color: #6c757d;
        border-color: #6c757d;
        background-color: white;
    }
    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: white;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }
    .table th,
    .table td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
        white-space: nowrap;
    }
    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #495057;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .table tr:hover {
        background-color: #f8f9fa;
    }
    .table-container {
        overflow-x: auto;
        margin-bottom: 1.5rem;
    }
    .badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
    }
    .badge-present {
        background-color: #28a745;
        color: white;
    }
    .badge-absent {
        background-color: #dc3545;
        color: white;
    }
    .badge-late {
        background-color: #ffc107;
        color: #212529;
    }
    .badge-excused {
        background-color: #17a2b8;
        color: white;
    }
    .chart-container {
        height: 400px;
        margin-bottom: 1.5rem;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .stat-card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 1.5rem;
        text-align: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 0.5rem;
    }
    .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
    }
    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }
    .pagination-item {
        margin: 0 0.25rem;
    }
    .pagination-link {
        display: inline-block;
        padding: 0.5rem 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        text-decoration: none;
        color: #007bff;
        transition: all 0.15s ease-in-out;
    }
    .pagination-link:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }
    .pagination-link.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    /* 标签页导航 */
    .tab-container {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 2rem;
    }
    .tabs {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tab {
        margin-bottom: -1px;
    }
    .tab-link {
        display: block;
        padding: 1rem 1.5rem;
        text-decoration: none;
        color: #6c757d;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        transition: all 0.2s;
    }
    .tab-link:hover {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #495057;
    }
    .tab-link.active {
        background-color: white;
        border-color: #dee2e6 #dee2e6 white;
        color: #495057;
        font-weight: 600;
    }
    .tab-content {
        margin-bottom: 2rem;
    }
    .tab-pane {
        display: none;
    }
    .tab-pane.active {
        display: block;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .attendance-container {
            padding: 0 1rem;
        }
        .section {
            padding: 1.5rem 1rem;
        }
        .section-header {
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }
        .filter-container {
            flex-direction: column;
        }
        .stats-grid {
            grid-template-columns: 1fr;
        }
        .tabs {
            overflow-x: auto;
        }
        .tab-link {
            white-space: nowrap;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-calendar-check mr-2 text-primary"></i>学生出勤
    </h1>
    <p class="text-gray-600">查看和管理学生出勤情况</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="attendance-container">
    <!-- 标签页导航 -->
    <div class="tab-container">
        <ul class="tabs">
            <li class="tab"><a href="#attendance-overview" class="tab-link active" data-toggle="tab">出勤概览</a></li>
            <li class="tab"><a href="#class-attendance" class="tab-link" data-toggle="tab">班级出勤</a></li>
            <li class="tab"><a href="#individual-attendance" class="tab-link" data-toggle="tab">个人出勤</a></li>
            <li class="tab"><a href="#attendance-report" class="tab-link" data-toggle="tab">出勤报告</a></li>
        </ul>
    </div>
    
    <!-- 标签页内容 -->
    <div class="tab-content">
        <!-- 出勤概览标签页 -->
        <div id="attendance-overview" class="tab-pane active">
            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value">92%</div>
                    <div class="stat-label">出勤率</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">5</div>
                    <div class="stat-label">缺勤次数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">12</div>
                    <div class="stat-label">迟到次数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">3</div>
                    <div class="stat-label">请假次数</div>
                </div>
            </div>
            
            <!-- 出勤图表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-chart-bar text-primary"></i>
                        出勤情况统计
                    </h2>
                </div>
                <div class="chart-container" id="attendance-chart"></div>
            </div>
            
            <!-- 最近出勤记录 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-history text-primary"></i>
                        最近出勤记录
                    </h2>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>课程名称</th>
                                <th>日期</th>
                                <th>节次</th>
                                <th>出勤状态</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>人工智能导论</td>
                                <td>2024-05-20</td>
                                <td>3-4节</td>
                                <td><span class="badge badge-present">出勤</span></td>
                                <td>-</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>机器学习</td>
                                <td>2024-05-18</td>
                                <td>1-2节</td>
                                <td><span class="badge badge-present">出勤</span></td>
                                <td>-</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>高等数学</td>
                                <td>2024-05-17</td>
                                <td>5-6节</td>
                                <td><span class="badge badge-late">迟到</span></td>
                                <td>迟到10分钟</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>数据结构</td>
                                <td>2024-05-15</td>
                                <td>3-4节</td>
                                <td><span class="badge badge-absent">缺勤</span></td>
                                <td>未请假</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>计算机网络</td>
                                <td>2024-05-14</td>
                                <td>1-2节</td>
                                <td><span class="badge badge-excused">请假</span></td>
                                <td>病假</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页控制 -->
                <div class="pagination">
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&laquo;</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link active">1</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">2</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">3</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&raquo;</a>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 班级出勤标签页 -->
        <div id="class-attendance" class="tab-pane">
            <!-- 筛选条件 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-filter text-primary"></i>
                        筛选条件
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="course-filter" class="form-label">选择课程</label>
                        <select id="course-filter" class="form-control">
                            <option value="all">全部课程</option>
                            <option value="CS301">人工智能导论</option>
                            <option value="CS402">机器学习</option>
                            <option value="MATH201">高等数学</option>
                            <option value="CS202">数据结构</option>
                            <option value="CS204">计算机网络</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="semester-filter" class="form-label">学期</label>
                        <select id="semester-filter" class="form-control">
                            <option value="2024-2025-1">2024-2025学年第1学期</option>
                            <option value="2023-2024-2">2023-2024学年第2学期</option>
                            <option value="2023-2024-1">2023-2024学年第1学期</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="date-range" class="form-label">日期范围</label>
                        <input type="date" id="date-range" class="form-control">
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="attendance-status" class="form-label">出勤状态</label>
                        <select id="attendance-status" class="form-control">
                            <option value="all">全部状态</option>
                            <option value="present">出勤</option>
                            <option value="absent">缺勤</option>
                            <option value="late">迟到</option>
                            <option value="excused">请假</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100">查询</button>
                    </div>
                </div>
            </div>
            
            <!-- 班级出勤列表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-users text-primary"></i>
                        班级出勤情况
                    </h2>
                    <div>
                        <button class="btn btn-outline-primary" id="export-attendance-btn">
                            <i class="fa fa-download mr-1"></i>导出报表
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>课程名称</th>
                                <th>日期</th>
                                <th>节次</th>
                                <th>出勤状态</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>2021030101</td>
                                <td>张明</td>
                                <td>人工智能导论</td>
                                <td>2024-05-20</td>
                                <td>3-4节</td>
                                <td><span class="badge badge-present">出勤</span></td>
                                <td>-</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">编辑</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>2021030102</td>
                                <td>李华</td>
                                <td>人工智能导论</td>
                                <td>2024-05-20</td>
                                <td>3-4节</td>
                                <td><span class="badge badge-present">出勤</span></td>
                                <td>-</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">编辑</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>2021030103</td>
                                <td>王小红</td>
                                <td>人工智能导论</td>
                                <td>2024-05-20</td>
                                <td>3-4节</td>
                                <td><span class="badge badge-late">迟到</span></td>
                                <td>迟到15分钟</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">编辑</button>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>2021030104</td>
                                <td>赵小刚</td>
                                <td>人工智能导论</td>
                                <td>2024-05-20</td>
                                <td>3-4节</td>
                                <td><span class="badge badge-absent">缺勤</span></td>
                                <td>未请假</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">编辑</button>
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>2021030105</td>
                                <td>孙小丽</td>
                                <td>人工智能导论</td>
                                <td>2024-05-20</td>
                                <td>3-4节</td>
                                <td><span class="badge badge-excused">请假</span></td>
                                <td>事假</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">编辑</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页控制 -->
                <div class="pagination">
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&laquo;</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link active">1</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">2</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">3</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&raquo;</a>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 个人出勤标签页 -->
        <div id="individual-attendance" class="tab-pane">
            <!-- 学生选择 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-user text-primary"></i>
                        选择学生
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 2; min-width: 200px;">
                        <label for="student-search" class="form-label">搜索学生</label>
                        <input type="text" id="student-search" class="form-control" placeholder="输入学号或姓名搜索">
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="class-filter" class="form-label">选择班级</label>
                        <select id="class-filter" class="form-control">
                            <option value="all">全部班级</option>
                            <option value="CS2021-1">计算机科学与技术2021级1班</option>
                            <option value="CS2021-2">计算机科学与技术2021级2班</option>
                            <option value="CS2021-3">计算机科学与技术2021级3班</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100">查询</button>
                    </div>
                </div>
            </div>
            
            <!-- 学生出勤详情 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-user-check text-primary"></i>
                        学生出勤详情
                    </h2>
                    <div>
                        <span class="mr-2">张明 (2021030101)</span>
                        <button class="btn btn-outline-secondary btn-sm">
                            <i class="fa fa-print mr-1"></i>打印
                        </button>
                    </div>
                </div>
                
                <!-- 学生出勤统计 -->
                <div class="stats-grid mb-4">
                    <div class="stat-card">
                        <div class="stat-value">92%</div>
                        <div class="stat-label">出勤率</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">48</div>
                        <div class="stat-label">应出勤次数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">44</div>
                        <div class="stat-label">实际出勤次数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">4</div>
                        <div class="stat-label">缺勤次数</div>
                    </div>
                </div>
                
                <!-- 课程出勤情况 -->
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>课程名称</th>
                                <th>应出勤次数</th>
                                <th>实际出勤次数</th>
                                <th>出勤率</th>
                                <th>缺勤次数</th>
                                <th>迟到次数</th>
                                <th>请假次数</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>人工智能导论</td>
                                <td>12</td>
                                <td>11</td>
                                <td>91.7%</td>
                                <td>1</td>
                                <td>0</td>
                                <td>0</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>机器学习</td>
                                <td>10</td>
                                <td>10</td>
                                <td>100%</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>高等数学</td>
                                <td>14</td>
                                <td>12</td>
                                <td>85.7%</td>
                                <td>2</td>
                                <td>0</td>
                                <td>0</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>数据结构</td>
                                <td>12</td>
                                <td>11</td>
                                <td>91.7%</td>
                                <td>1</td>
                                <td>0</td>
                                <td>0</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">详情</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 出勤报告标签页 -->
        <div id="attendance-report" class="tab-pane">
            <!-- 报告筛选 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-file-alt text-primary"></i>
                        生成出勤报告
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="report-type" class="form-label">报告类型</label>
                        <select id="report-type" class="form-control">
                            <option value="student">学生个人报告</option>
                            <option value="class">班级报告</option>
                            <option value="course">课程报告</option>
                            <option value="department">学院报告</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="report-semester" class="form-label">学期</label>
                        <select id="report-semester" class="form-control">
                            <option value="2024-2025-1">2024-2025学年第1学期</option>
                            <option value="2023-2024-2">2023-2024学年第2学期</option>
                            <option value="2023-2024-1">2023-2024学年第1学期</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="report-format" class="form-label">报告格式</label>
                        <select id="report-format" class="form-control">
                            <option value="excel">Excel</option>
                            <option value="pdf">PDF</option>
                            <option value="csv">CSV</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100" id="generate-report-btn">生成报告</button>
                    </div>
                </div>
            </div>
            
            <!-- 历史报告 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-history text-primary"></i>
                        历史报告
                    </h2>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>报告名称</th>
                                <th>报告类型</th>
                                <th>生成日期</th>
                                <th>文件大小</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>计算机科学与技术2021级1班出勤报告</td>
                                <td>班级报告</td>
                                <td>2024-05-20</td>
                                <td>1.2MB</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary mr-1">下载</button>
                                    <button class="btn btn-sm btn-outline-secondary">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>人工智能导论课程出勤报告</td>
                                <td>课程报告</td>
                                <td>2024-05-15</td>
                                <td>850KB</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary mr-1">下载</button>
                                    <button class="btn btn-sm btn-outline-secondary">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>张明个人出勤报告</td>
                                <td>学生个人报告</td>
                                <td>2024-05-10</td>
                                <td>420KB</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary mr-1">下载</button>
                                    <button class="btn btn-sm btn-outline-secondary">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 获取DOM元素
    const tabLinks = document.querySelectorAll('.tab-link');
    const tabPanes = document.querySelectorAll('.tab-pane');
    const exportAttendanceBtn = document.getElementById('export-attendance-btn');
    const generateReportBtn = document.getElementById('generate-report-btn');
    
    // 标签页切换功能
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有标签页的活动状态
            tabLinks.forEach(l => l.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));
            
            // 为当前点击的标签页添加活动状态
            this.classList.add('active');
            
            // 显示对应的标签页内容
            const targetId = this.getAttribute('href').substring(1);
            const targetPane = document.getElementById(targetId);
            if (targetPane) {
                targetPane.classList.add('active');
            }
            
            // 添加切换动画效果
            tabPanes.forEach(pane => {
                if (pane.classList.contains('active')) {
                    pane.style.opacity = '0';
                    pane.style.transform = 'translateY(10px)';
                    pane.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    
                    setTimeout(() => {
                        pane.style.opacity = '1';
                        pane.style.transform = 'translateY(0)';
                    }, 50);
                }
            });
        });
    });
    
    // 导出出勤数据按钮点击事件
    exportAttendanceBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该调用导出功能
        alert('出勤数据导出功能将在后续版本中实现');
    });
    
    // 生成报告按钮点击事件
    generateReportBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该调用生成报告功能
        alert('生成出勤报告功能将在后续版本中实现');
    });
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        // 为统计卡片添加动画
        const statCards = document.querySelectorAll('.stat-card');
        statCards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = `opacity 0.5s ease ${300 + index * 100}ms, transform 0.5s ease ${300 + index * 100}ms`;
            
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 300 + index * 100);
        });
        
        // 为表格添加动画
        const tables = document.querySelectorAll('.table');
        tables.forEach((table, index) => {
            table.style.opacity = '0';
            table.style.transition = `opacity 0.5s ease ${800 + index * 200}ms`;
            
            setTimeout(() => {
                table.style.opacity = '1';
            }, 800 + index * 200);
        });
        
        // 为按钮添加悬停效果
        const buttons = document.querySelectorAll('.btn');
        buttons.forEach(button => {
            button.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-1px)';
                this.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
                this.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease';
            });
            
            button.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = 'none';
            });
        });
        
        // 如果是出勤概览页面，初始化图表
        const activeTab = document.querySelector('.tab-pane.active');
        if (activeTab && activeTab.id === 'attendance-overview') {
            // 在实际应用中，这里应该使用Chart.js等库初始化图表
            // 这里只是模拟图表的存在
            const chartContainer = document.getElementById('attendance-chart');
            if (chartContainer) {
                chartContainer.innerHTML = `
                    <div style="height: 100%; display: flex; align-items: center; justify-content: center;">
                        <div style="text-align: center;">
                            <i class="fa fa-chart-bar text-primary" style="font-size: 4rem; opacity: 0.3;"></i>
                            <p style="margin-top: 1rem; color: #6c757d;">出勤统计图表将在这里显示</p>
                        </div>
                    </div>
                `;
            }
        }
    });
</script>
{% endblock %}